<?php 
$account = new Account();
$account = $account->get(Session::get('account_id'));

$chipList = new ChipList();
$chipList = $chipList->getByAccountId($account->id);

$chip = new Chip();
$chip = $chip->get(Session::get('chip_id'));

$visited_pages = unserialize($chip->visited_pages);
if($visited_pages['berichten'] == 0):
	$visited_pages['berichten'] = 1;
	$chip->visited_pages = serialize($visited_pages);
	$chip->save();
?>
	<script>
	$(function() {
		$("#info-form").dialog( "option", "width", 500 );
		$("#info-form").dialog("open");
	});
	</script>
	<div id="info-form" title="Uitleg over berichten">
		<p>Druk op een naam aan de linkerkant van het scherm en vervolgens op het tekstvak om een bericht te typen. Druk op "verstuur bericht" om het bericht te versturen. Stuur een bericht naar iedereen door op "groepsgesprek" te drukken. Als u drukt op "maak geluidsbericht" kunt u een spraakopname versturen.</p>
	</div>
<? endif; ?>

<script type="text/javascript">
$('document').ready(function () {

	$('#thetextarea').click(function(){
		if($(this).val() == 'Schrijf hier een bericht..'){
			$(this).val('');
		}
	});

	var $my_chip_id = $('input[name=my_chip_id]');	
	var $send_chip_id = $('input[name=send_chip_id]');	
	$("#text_bericht").parent().addClass("selected");
	$chip = $('.person');
	$send_message = $('#textarea');	
		
	// Als er op een naam wordt geklikt
	$chip.click(function () {
		chip_id = $(this).data('chip_id');
		if(chip_id == 0) {
			getMessagesByGroup();
		} else {
			getMessageByChipId(chip_id);
		}

		$send_chip_id.val(chip_id);
		
		$chip.each(function () {
			$(this).removeClass('selected');
		});
		$(this).addClass('selected');
	});

	// Eerste keer op pagina, klik dan automatisch op de eerste persoon in het rijtje
	$(".person:first-child").click();
	
	// Als audiobericht of tekstbericht wordt geselecteerd
	$bericht = $('.message_type');
	$bericht.click(function () {
	
		$bericht.each(function () {
			$(this).removeClass('selected');
		});
		$(this).addClass('selected');
	});
	
	// Als textbericht button wordt geklikt
	$('#text_bericht').click(function() {

		$('#tekst').show();
		$('#audio').hide();
		$send_message.show();
	});

	// Als audio button wordt geklikt
	$('#audio_bericht').click(function() {

		$('#tekst').hide();
		$('#audio').show();

		$send_message.show();
	});
	
	
	// Als textbericht button wordt geklikt
	$('button[name=send_text]').live('click',function() {
		sendMessage();
	});

	function getMessageByChipId(chip_id) {		
		console.log(chip_id);		
		$messages = $('#messages');		
		$.get("ajax/chip_messages.php", {chip_id: chip_id}, function(data){
			$messages.empty();
			$.each(data, function (i, message) {
				if(message.chip_id_sender == $send_chip_id.val()) {
					$messages.append('<div class="received_message box ninecol rounded"><div class="message_time">Ontvangen om: '+message.time+' uur</div>'+ message.message + '</div>');
				} else {
					$messages.append('<div class="sended_message box ninecol rounded last"><div class="message_time">Verstuurd om: '+message.time+' uur</div>'+ message.message + '</div>');
				}
			});
			$messages.scrollTop($messages.prop('scrollHeight'));			
	    }, "json");
	}
	
	function getMessagesByGroup() {		
		$messages = $('#messages');		
		$.get("ajax/group_messages.php", function(data){
			$messages.empty();
			$.each(data, function (i, message) {
				if(message.chip_id_sender == $my_chip_id.val()) {
					$messages.append('<div class="sended_message box ninecol rounded last"><div class="message_time">Verstuurd om: '+message.time+' uur</div>'+ message.message + '</div>');
				} else {
					$messages.append('<div class="received_message box ninecol rounded"><div class="message_time">'+message.name+' om: '+message.time+' uur</div>'+ message.message + '</div>');
				}
			});
			$messages.scrollTop($messages.prop('scrollHeight'));			
	    }, "json");
	}
	
	function sendMessage() {				
		chip_id = $send_chip_id.val();	
		message = $('textarea[name=message]').val();	
		message = $.trim(message);

		if(message == ""){
			alert("Je hebt geen bericht ingevuld");
		}
		else{
			$.post("ajax/send_message.php", {chip_id: chip_id, message: message}, function(){ 
				$messages = $('#messages');
				var d = new Date();
				var curr_hour = d.getHours();
				var curr_min = d.getMinutes();
				$messages.append('<div class="sended_message box ninecol rounded last"><div class="message_time">Verstuurd om: '+ curr_hour + ':'+ curr_min +' uur</div>'+ message + '</div>');
				$messages.animate({ scrollTop: $messages.prop("scrollHeight") }, 1000);
			});

			$('textarea[name=message]').val('');
		}
	}
	
});
</script>

 <style>


.container, body, html{
	height: 100%;                
}

#messages{
	height: 375px;
	overflow-y:scroll;
	margin-bottom: 10px;
}

#controls{
	width: 100%;
	height: 268px;
	overflow: hidden;
}

.box.brown{
	background: #eedbb1;
}

.person h3{
	text-align: left;
	margin: 16px;
	text-transform:uppercase !important;
	font-weight:lighter;
	
}

.person.selected{
	position: relative;
	background-color:#d9bc96;
}

.person{
	border-bottom:1px solid #d9bc96;
	border-top:1px solid #fff1d1;
	clear: both;
	float: left;
	cursor: pointer;
	width: 100%
}

#people {
	float:left;
	height:100%;
	-moz-box-shadow: 0 0 0 1px #d9bc96;
}

#tekst{ background: #EEDBB1; width: 100%; overflow:hidden;}
#tekst textarea{ width: 96%; margin: 2%;}
.message_type{
	background-position:25px 15px !important;
	float: left;
}

.message_type.selected{
	background: #EEDBB1; 
}

.message_type div.box{
	padding: 9px 36px 26px 98px;
}
.message_type div.box h2{
	font-size:20px;
}

.received_message {
	margin-top: 5px;
	float: left;
	background-color: #fff;
	border:1px solid #e0ddd4;
	padding:2%;
}

.sended_message {
	margin-top: 5px;
	float: right;
	text-align:right;
	background-color: #fff;
	border:1px solid #e0ddd4;
	padding:2%;
}

.message_time {
	height:15px;
	font-weight: bold !important;
	margin-bottom:5px;
}

.submit{ 
	float: right;
	margin:0 10px 10px 0;
	padding: 6px;
}

#audio_bericht{
	padding-left: 100px !important;
}
</style>
    
 <input type="hidden" name="my_chip_id" value="<?= Session::get('chip_id') ?>" />
 <input type="hidden" name="send_chip_id" value="" />
 <div class="row full-height" style="position:relative">
 
 <div style="position: absolute; bottom: 0; right: 0;">
	<div class="message_type" style="background-image: url('/img/icons/icon_tekstbericht.png'); background-repeat: no-repeat; background-position: 0px 10px;">
	<div class="box" id="text_bericht"><h2>Maak tekstbericht</h2></div>
	
	</div>
	<div class="message_type" style="background-image: url('/img/icons/icon_audiobericht.png'); background-repeat: no-repeat; background-position: 10px 10px;">
		<div class="box" id="audio_bericht"><h2>Maak geluidsbericht</h2></div>	
	</div>
</div>

	<div class="twelvecol box red last">
		<div class="outer_wrapper rounded">
			<div class="wrapper">
				<div class="top_nav">
					<button class="twocol" onClick="javascript: history.go(-1)">Terug</button>
					<h2>Berichten</h2>
				</div>
			</div>
		</div>
	</div>

 	<div class="fourcol full-height">
	 	<div class="box brown full-height">
	 	
		 	<?php 
		 	$chipIds = "";
		 	foreach ($chipList as $chip):
		 		$chipIds .= $chip->id . ',';
		 	?>
		 		
			 	<?php if($chip->id != Session::get('chip_id')): ?>
			 		<div class="person" data-chip_id="<?= $chip->id ?>">
			 			<h3><?= $chip->name ?></h3>
			 		</div>
			 	<?php endif; ?>
		 	<?php endforeach; ?>
		 	
		 	
		 
		 	<div class="person" data-chip_id="0">
	 			<h3>Groepsgesprek</h3>
	 		</div>
	 	</div>
 	</div>
 	<div class="eightcol last full-height">
 	
	 	<div id="messages"></div>
		<div id="controls">
			<div id="audio" style="display: none">
				<img style="float: left" src="/img/icons/record.gif" /> <h2 style="float: left; margin: 30px 0 0 20px;">Druk op de knop om op te nemen</h2>
			</div>
			<div id="tekst">
				<textarea name="message" id="thetextarea"></textarea>
				<button class="submit" name="send_text">Verstuur bericht</button>
			</div>		
	 	</div>
	</div>
</div>

 